<template>
  <div class="feed-material-state">
    <span class="block_label_color mad_label"
          :class="stateColor">{{data.materialStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'FeedMaterialState',
  props: {
    data: Object
  },
  computed: {
    // 根据工单进度状态返回相应class
    stateColor() {
      switch (this.data.materialStatusValue) {
        case 'Unneeded':
          return 'not_materiel_loading'
        case 'NotYet':
          return 'wait_materiel_loading'
        case 'Processing':
          return 'materiel_loading'
        case 'Finished':
          return 'materiel_loaded'
      }
    }
  }
}
</script>

<style lang="less">
  /*上料状态*/
  // 无需上料
  @mesNotMaterielLoading: #7e8e9f;
  // 待上料
  @mesWaitMaterielLoading: #00b4ff;
  // 上料中
  @mesMaterielLoading: #ff931f;
  // 已上料
  @mesMaterielLoaded: #33cc66;
  .feed-material-state{
    .block_label_color{
      /*上料状态*/
      // 无需上料
      &.not_materiel_loading{
        background-color: @mesNotMaterielLoading;
      }
      // 待上料
      &.wait_materiel_loading{
        background-color: @mesWaitMaterielLoading;
      }
      &.materiel_loading{
        background-color: @mesMaterielLoading;
      }
      &.materiel_loaded{
        background-color: @mesMaterielLoaded;
      }
    }
  }
</style>
